<template>
  <div class="container">
    <!-- <div class="plugins-tips">
      wangEditor：轻量级 web 富文本编辑器，配置方便，使用简单。 访问地址：
      <a href="https://www.wangeditor.com/doc/" target="_blank">wangEditor</a>
    </div> -->
    <div class="mgb20" ref="editor"></div>
  </div>
</template>

<script >
import WangEditor from "wangeditor";
import { getToken } from "@/utils/auth";
export default {
  props: {
    editorHtml: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      instance: null,
      editor: '',
      currentValue: this.value
    }
  },
  watch: {
    value: {
      handler(nv, ov) {
        // console.log('nv, ov', nv, ov);
        this.currentValue = nv;
        this.instance.txt.html(this.currentValue);
      }
    }
  },
  mounted() {
    this.init();
    //富文本修改信息的时候，数据回显
    this.currentValue = this.currentValue.replaceAll('<table>', '<table border>');
    this.instance.txt.html(this.currentValue);
    // console.log(this.currentValue);
  },
  beforeDestroy() {
    this.instance.destroy();
    this.instance = null;
  },
  methods: {
    init() {
      let _this = this;
      let editor = this.$refs.editor
      this.instance = new WangEditor(editor);
      this.instance.config.uploadImgServer = process.env.VUE_APP_BASE_API + "/common/upload";
      this.instance.config.uploadImgHeaders = {
        Authorization: "Bearer " + getToken()
      }
      console.log('this.instance.config.uploadImgServer:' + this.instance.config.uploadImgServer)
      this.instance.config.uploadFileName = "file";
      this.instance.config.uploadImgMaxSize = 2 * 1024 * 1024; // 2M
      //onchange回调函数
      this.instance.config.onchange = function (newHtml) {
        _this.currentValue = newHtml;
      };
      console.log(this.instance.config)
      this.instance.config.onblur = function (newHtml) {
        newHtml = newHtml.replaceAll('<table>', '<table border>')
        _this.currentValue = newHtml;
        _this.$emit('input',  newHtml)
        _this.$emit('catchData',  newHtml)
      };

      this.instance.config.uploadImgHooks = {
        // 上传图片之前
        before: function (fileData) {
          console.log(fileData);

          var dataV = new FormData(); //重点--使用formdata添加需要一起传的参数
          dataV.append("file", fileData.file);
          // 可阻止图片上传
          return {
            prevent: false,
            msg: "需要提示给用户的错误信息",
          };
        },
        // 图片上传并返回了结果，图片插入已成功
        success: function (xhr) {
          console.log("success", xhr);
        },
        // 图片上传并返回了结果，但图片插入时出错了
        fail: function (xhr, editor, resData) {
          console.log("fail", resData);
        },
        // 上传图片出错，一般为 http 请求的错误
        error: function (xhr, editor, resData) {
          console.log("error", xhr, resData);
        },
        // 上传图片超时
        timeout: function (xhr) {
          console.log("timeout");
        },
        // 图片上传并返回了结果，想要自己把图片插入到编辑器中
        // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
        customInsert: function (insertImgFn, result) {
          // result 即服务端返回的接口
          // console.log("customInsert", result.data.fullurl);

          // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
          insertImgFn(result.fileName);
        },
      };
      this.instance.config.zIndex = 1;
      this.instance.create();
    }
  },
  

}

</script>

<style></style>
